<template>
    <!-- PAGE CONTENT BEGINS -->
    <div>
        <el-menu :default-active="activeIndex2"
                 class="el-menu-demo"
                 mode="horizontal"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b">
            <el-menu-item index="0">
                <router-link to="/welcome">主页</router-link>
            </el-menu-item>
            <el-menu-item index="1">
                <router-link to="/user/administrator">管理员</router-link>
            </el-menu-item>
            <el-menu-item index="2">
                <router-link to="/book/book">书籍</router-link>
            </el-menu-item>
            <el-menu-item index="3">
                <router-link to="/user/member">会员</router-link>
            </el-menu-item>
            <el-menu-item index="4">
                <router-link to="/book/book-link">借阅一览</router-link>
            </el-menu-item>
            <el-submenu index="5">
                <template slot="title">当前用户:{{loginUser.name}}</template>
                <el-menu-item index="5-1" @click="logout">退出登录</el-menu-item>
            </el-submenu>
        </el-menu>
        <p style="margin-top: 10px">
            <button v-on:click="add()" class="btn btn-white btn-warning btn-round">
                <i class="ace-icon fa fa-edit bigger-120 blue"></i>
                新增
            </button>
            &nbsp;
            <button v-on:click="list()" class="btn btn-white btn-warning btn-round">
                <i class="ace-icon fa fa-refresh bigger-120 blue"></i>
                刷新
            </button>
        </p>
        <table id="simple-table" class="table  table-bordered table-hover">
            <thead>
            <tr>
                <th> ID</th>
                <th> 会员名称</th>
                <th> 会员编号</th>
                <th> 会员积分</th>
                <th> 会员等级</th>
                <th> 账号</th>
                <th> 密码</th>
                <th> 电话</th>
                <th> 住址</th>
                <th> 性别</th>
                <th> 年龄</th>
                <th> 注册时间</th>
                <th> 创建时间</th>
                <th> 修改时间</th>
                <th> 是否删除</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bbsMember in bbsMembers" :key="bbsMember.num">
                <td> {{bbsMember.id}}</td>
                <td> {{bbsMember.name}}</td>
                <td> {{bbsMember.code}}</td>
                <td> <el-tag>{{bbsMember.integral}}</el-tag></td>
                <td> <el-tag type="warning">{{bbsMember.grade === 0 ? '普通会员' : bbsMember.grade === 1 ? '白银会员' :bbsMember.grade === 2 ? '黄金会员' : bbsMember.grade === 3 ? '铂金会员' : bbsMember.grade === 4 ? '钻石会员' : '骨灰会员'}}</el-tag></td>
                <td> {{bbsMember.username}}</td>
                <td> {{bbsMember.password}}</td>
                <td> {{bbsMember.tel}}</td>
                <td> {{bbsMember.address}}</td>
                <td> <el-tag>{{bbsMember.sex === 1 ? '男' : '女'}}</el-tag></td>
                <td> {{bbsMember.age}}</td>
                <td> {{bbsMember.registrationTime}}</td>
                <td> {{bbsMember.createdTime}}</td>
                <td> {{bbsMember.updatedTime}}</td>
                <td>
                    <el-tag type="danger">{{bbsMember.deleteFlag === 1 ? '删除' : '未删除'}}</el-tag>
                </td>
                <td>
                    <div class="hidden-sm hidden-xs btn-group">
                        <button v-on:click="edit(bbsMember)" class="btn btn-xs btn-info">
                            <i class="ace-icon fa fa-pencil bigger-120"></i>
                        </button>

                        <button v-on:click="del(bbsMember.id)" class="btn btn-xs btn-danger">
                            <i class="ace-icon fa fa-trash-o bigger-120"></i>
                        </button>
                    </div>

                    <div class="hidden-md hidden-lg">
                        <div class="inline pos-rel">
                            <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                            </button>

                            <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                <li>
                                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                    <span class="blue">
                      <i class="ace-icon fa fa-search-plus bigger-120"></i>
                    </span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                    <span class="green">
                      <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                    </span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                    <span class="red">
                      <i class="ace-icon fa fa-trash-o bigger-120"></i>
                    </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <!--模态框-->
        <div class="modal fade" id="myFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">表单</h4>
                    </div>
                    <div class="modal-body">
                        <!--表格-->
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">会员名称</label>
                                <div class="col-sm-10">
                                    <input v-model="bbsMember.name" class="form-control" placeholder="输入会员名称"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">会员编号</label>
                                <div class="col-sm-10">
                                    <input v-model="bbsMember.code" class="form-control" placeholder="输入会员编号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">会员积分</label>
                                <div class="col-sm-10">
                                    <input v-model="bbsMember.integral" class="form-control" placeholder="输入会员积分"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">会员等级</label>
                                <div class="col-sm-10">
                                    <el-select v-model="bbsMember.grade" placeholder="选择会员等级">
                                        <el-option label="普通会员" value="0"></el-option>
                                        <el-option label="白银会员" value="1"></el-option>
                                        <el-option label="黄金会员" value="2"></el-option>
                                        <el-option label="铂金会员" value="3"></el-option>
                                        <el-option label="钻石会员" value="4"></el-option>
                                        <el-option label="骨灰会员" value="5"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">账号</label>
                                <div class="col-sm-10">
                                    <input v-model="bbsMember.username" class="form-control" placeholder="输入账号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-10">
                                    <input v-model="bbsMember.password" class="form-control" placeholder="输入密码"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">电话</label>
                                <div class="col-sm-10">
                                    <input v-model="bbsMember.tel" class="form-control" placeholder="输入电话"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">住址</label>
                                <div class="col-sm-10">
                                    <input v-model="bbsMember.address" class="form-control" placeholder="输入住址"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别 </label>
                                <div class="col-sm-10">
                                    <el-select v-model="bbsMember.sex" placeholder="选择性别">
                                        <el-option label="男" value="1"></el-option>
                                        <el-option label="女" value="0"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-10">
                                    <input v-model="bbsMember.age" class="form-control" placeholder="输入年龄"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">注册时间</label>
                                <div class="col-sm-10">
                                    <el-date-picker
                                            v-model="bbsMember.registrationTime"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            type="datetime"
                                            placeholder="选择注册时间">
                                    </el-date-picker>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
                    </div>
                </div><!-- /.modal-content-->
            </div><!-- /.modal-dialog-->
        </div><!-- /.modal-->
    </div>
</template>
<script>
  import {apiDefaultErrorHandler} from "../../api/base";
  import bbsMemberApi from "../../api/work/bbsMember";

  export default {
    name: 'system-bbsMember',
    data: function () {
      return {
        //映射表单数据
        bbsMember: {},
        bbsMembers: [],
        loginUser: {},
      }
    },
    mounted: function () {
      let _this = this;
      _this.list();
      //重新加载js
      $.getScript('ace/assets/js/ace.min.js');
      _this.loginUser = Tool.getLoginUser();
    },
    methods: {

      add() {
        let _this = this;
        _this.bbsMember = {};
        $("#myFormModal").modal("show");
      },

      edit(bbsMember) {
        let _this = this;
        _this.bbsMember = $.extend({}, bbsMember);
        $("#myFormModal").modal("show");
      },
      /**查询*/
      list() {
        let _this = this;
        Loading.show();
        bbsMemberApi.queryAll().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            _this.bbsMembers = data.list
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        });
        Loading.hide();
      },
      /**保存*/
      save() {
        let _this = this;
        /**保存校验*/
        if (1 != 1
          || !Validator.length(_this.bbsMember.name, "会员名称", 1, 50)
          || !Validator.length(_this.bbsMember.code, "会员编号", 1, 50)
          || !Validator.length(_this.bbsMember.username, "账号", 1, 50)
          || !Validator.length(_this.bbsMember.password, "密码", 1, 50)
          || !Validator.length(_this.bbsMember.tel, "电话", 1, 50)
          || !Validator.length(_this.bbsMember.address, "住址", 1, 50)
        ) {
          return;
        }
        bbsMemberApi.save(_this.bbsMember).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            console.log("保存{tableNameCn}列表结果：", data);
            $("#myFormModal").modal("hide");
            _this.list();
            toast.success("保存成功！");
          } else {
            toast.warning("操作失败");
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          toast.warning("操作失败");
          apiDefaultErrorHandler(ex)
        })
      },
      /**删除*/
      del(id) {
        let _this = this;
        //弹出框
        Confirm.show("删除{tableNameCn}后不可恢复，您是否检查删除!", function () {
          bbsMemberApi.delete({id: id}).then(({param}) => {
            if (this.$http.isResponseSuccess(param)) {
              toast.success("删除成功！");
              _this.list()
            } else {
              toast.success("删除成功！");
              _this.list()
            }
          }).catch(() => {
            toast.warning("删除成功！");
            _this.list()
          });
        })
      },
      /**退出登录*/
      logout() {
        Tool.setLoginUser(null);
        this.$router.push("/login");
      },
    }
  }
</script>